<html>
	<head>
		<style>
			body {
				background-color: #d1d1d1;
			}
			.warp {
				width: 800px;
				margin-left: auto;
				margin-right: auto;
				text-align: center;
				
			}
			#buttonsLine {
				margin-left: auto;
				margin-right: auto;
				margin-top: 30px;
			}
			.menuButton {
				padding: 10px 10px;
			}
			.listOfWebsitesLine {
				text-align: left;
				height: 57px;
				width: 100%;
				line-height: 36px;
				font-size: 18px;
				color: #6e6e6e;
			}
			.insideBox {
				height: 100%;
				background-color: white;
			}
			#buttonsLine .btn-default {
				margin: 10px 7px;
			}
			.box {
				height: 500px;
				background-color: #E6E6E6;
				padding: 18px;
				-webkit-box-shadow: 10px 10px 10px -9px;
				-webkit-border-radius: 11px;
				border: 1px solid white;
			}
			.xButton {
				
			}
			.categoryChecklist { 
				border:2px solid #ccc; 
				width: 100%;
				/* text-align: center; */
				margin: 10px auto;
			}
			.categoryCheckLine {
				height: 57px;
				font-size: 18px;
				color: #6e6e6e;
			}
			
			#banner {
				width: 100%;
				height: 80px;
				background-color: 272727;
			}
			
			#logo {
				float: left;
			}
			
			nav {
			}
			
			
			nav ul {
				margin-left: 8px;
				margin-top: 27px;
			}
			
			nav ul li {
				float: left;
				margin-left: 20px;
				font-size: 20px;
				line-height: 67px;
				margin-top: 6px;
			}
			
			
			nav ul li a {
				color: white;
			}
			
			nav ul li a:hover {
				color:white;
			}
			
			.line {
				background-image: url('images/line.png');
				width: 14px;
				height: 66px;
				float: left;
			}
			
			
		</style>
		<!-- JQuery Slider CSS -->
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
		<!-- Optional theme -->
		<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
			<!-- Latest compiled and minified JavaScript -->
			<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
			<!-- -- Bootstrap ---->
			<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
			<script type="text/javascript">
				//When "Categories is clicked, hide the others.
				$(document).ready(function(){
					$('#categoriesNav').click(function(){
						$('#listOfWebsitesSection').hide();
						$('#difficulty').hide();
						$('#categories').show();
					});
				});
				//When "Difficulty" is clicked, hide the others.
				$(document).ready(function(){
					$('#difficultyNav').click(function(){
						$('#listOfWebsitesSection').hide();
						$('#categories').hide();
						$('#difficulty').show();
					});
				});
				//When "listOfWebsitesSection" is clicked, hide the others.
				$(document).ready(function(){
					$('#listOfWebsitesNav').click(function(){
						$('#categories').hide();
						$('#difficulty').hide();
						$('#listOfWebsitesSection').show();
					});
				});
				
				//Difficulty Slider
				 $(function() {
					$( "#slider" ).slider({
					  value:100,
					  min: 0,
					  max: 500,
					  step: 50,
					  slide: function( event, ui ) {
						$( "#amount" ).val( "$" + ui.value );
					  }
					});
					$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
				  });
			</script>
	</head>
	
	<body style="background-color: #d1d1d1;">
		<header id="banner">
			<div class="warp">
				<img src="images/logo.png" id="logo" />
				
				<nav>
				<ul>
					<li id="listOfWebsitesNav"><a href="#">List of Websites</a></li>
					<li class="line"></li>
					<li id="categoriesNav"><a href="#">Categories</a></li>
					<li class="line"></li>
					<li id="difficultyNav"><a href="#">Difficulty</a></li>
				</ul>
			</nav>
		</div>
		</header><!-- /#banner -->
		
	<div class="warp">
			<div id="listOfWebsitesSection">
				<div class="insideBox">
					<ul id="listOfWebsites" class="list-group" style="

						width: 100%;">
					
					</ul>
					<div class="form-group">
						<input style="display: inline; width: 80%;" type="text" class="form-control" id="inputNewWebsite" placeholder="Add another site:">
						<button type="submit" class="btn btn-default addNewWebsite">Submit</button>
					</div>
                    <div class="form-group">
                        <input style="display: inline; width: 80%;" type="text" class="form-control" id="timePopUp" placeholder="Time between popUps" value="">
                        <button type="submit" class="btn btn-default timePopUpSave">Submit</button>
                    </div>
				</div>
			</div>		
			<div id="categories" style="display: none; margin-top: -10px;">
				<!-- Select the categories you'd like your obstacles to come from: -->
				<div class="insideBox">
					<div class="categoryChecklist">
						<li class="list-group-item categoryCheckLine"><input type="checkbox" /> Brain Puzzle <br /></li>
						<li class="list-group-item categoryCheckLine"><input type="checkbox" checked="checked"/> Arithmetic <br /></li>
						<li class="list-group-item categoryCheckLine"><input type="checkbox" /> History <br /></li>
					</div>
				</div>
			</div>
	
			<div id="difficulty" style="display: none;">
				<div class="insideBox">
				<br/>
				Obstacle Difficulty Options:
				<div id="sliderContainer" style="width: 50%; margin: 20px auto;">
					<div id="slider" style="margin-top: 20px;" ></div>
				</div>
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
            $('#timePopUp').attr('placeholder',localStorage["timePopUps"] + ' minutes');
            $('.timePopUpSave').click(function() {
                var time = $('#timePopUp').val();
                localStorage["timePopUps"] = time;
            });

			//Add websites in the array, to the list on the page
			var badWebsites;
			var sitesStr = localStorage["sites"];
            if(sitesStr) {
                badWebsites = JSON.parse(sitesStr);
            } else {
                badWebsites = [];
            }

                        $(document).ready(showWebsitesInList());
			function showWebsitesInList(){
				for (var i = 0; i < badWebsites.length;i++) {
					appendWebsiteToList(badWebsites[i]);
				}
			};
			function appendWebsiteToList(current){
				$('#listOfWebsites').append("<li class=\"list-group-item listOfWebsitesLine\">" + current + "<span style=\"float: right;\" class=\"glyphicon glyphicon-remove xButton\"></span></li>");
			}
			
			
			//REMOVE - In the list of websites, clicking the x button to make the website fade away.
			$('.xButton').click(function() {
				var nearestLi = $(this).parent().closest('li');
				nearestLi.fadeOut('slow');
				//Remove from array
				var index = badWebsites.indexOf(nearestLi.html());
				badWebsites.splice(index, 1);
                localStorage["sites"] = JSON.stringify(badWebsites);
			});
			//ADD - Clicking the Submit button, adds new website to list and prints it
			$('.addNewWebsite').click(function(){
				var valueFromForm = $('#inputNewWebsite').val();
				badWebsites.push(valueFromForm);
                localStorage["sites"] = JSON.stringify(badWebsites);

                appendWebsiteToList($('#inputNewWebsite').val());
				
				//REMOVE - In the list of websites, clicking the x button to make the website fade away.
				$('.xButton').click(function() {
					var nearestLi = $(this).parent().closest('li');
					nearestLi.fadeOut('slow');
					//Remove from array
                    var index = badWebsites.indexOf(nearestLi.html());
					badWebsites.splice(index, 1);
                    localStorage["sites"] = JSON.stringify(badWebsites);
                });
				
			});
		</script>
		<!-- JQueryUI -->
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

</body>
</html>